<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta name="Description" content="页面描述" />
	<meta name="Keywords" content="页面关键字" />
	<meta name="viewport" content="width=640,minimum-scale=0,maximum-scale=5,user-scalable=no">
	<script>
		if (navigator.appVersion.indexOf('Android') != -1) {
			document.addEventListener("DOMContentLoaded", function (e) {
				document.querySelector('body').style.zoom = e.target.activeElement.clientWidth / 640;
			});
		}
	</script>
	<title>购物车</title>
	<link href="css/common.css" rel="stylesheet">
</head>
<body>
	<div class="billing">
		<section class="billing-list mt bb">
			<!-- billing-list-in 为选中状态-->
			<div class="billing-list-info bb c ">
				<span class="fl">精彩飞扬红食品</span>
				<a href="javascript:;" class="delivery co2 fr">配送方式</a>
			</div>
			<div class="billing-list-cont c">
				<img src="images/红枣.jpg" width="150" height="125" class="billing-list-img" />
				<p class="billing-list-title">红枣</p>
				<p class='co2'>包邮买三送一</p>
				<div class="billing-list-min">
					<span class="co1">￥<em class="f32" data-num="22">22</em>.00元</span>
				</div>
				<div class="billing-list-number" data-par="par-number">
					<a href="javascript:;" class="number-less fl">-</a>
					<input value="1" maxlength="3" type="text" pattern="[0-9]*" class="number-input fl" />
					<a href="javascript:;" class="number-plus fl">+</a>
				</div>
			</div>
			<div class="billing-list-cont c">
				<img src="images/月饼.jpg" width="150" height="125" class="billing-list-img" />
				<p class="billing-list-title">华美月饼</p>
				<p class='co2'>包邮买三送一</p>
				<p>
					<span class="co1 pr20">￥68.00元/盒</span>
					<span class="co2">￥89.00元/斤</span>
				</p>
				<div class="billing-list-min">
					<span class="co1">￥<em class="f32" data-num="68">68</em>.00元</span>
				</div>
				<div class="billing-list-number" data-par="par-number">
					<a href="javascript:;" class="number-less fl">-</a>
					<input value="1" maxlength="3" type="text" pattern="[0-9]*" class="number-input fl" />
					<a href="javascript:;" class="number-plus fl">+</a>
				</div>
			</div>
			<div class="billing-list-cont c">
				<img src="images/月饼.jpg" width="150" height="125" class="billing-list-img" />
				<p class="billing-list-title">华美月饼</p>
				<p class='co2'>包邮买三送一</p>
				<p>
					<span class="co1 pr20">￥68.00元/盒</span>
					<span class="co2">￥89.00元/斤</span>
				</p>
				<div class="billing-list-min">
					<span class="co1">￥<em class="f32" data-num="68">68</em>.00元</span>
				</div>
				<div class="billing-list-number" data-par="par-number">
					<a href="javascript:;" class="number-less fl">-</a>
					<input value="1" maxlength="3" type="text" pattern="[0-9]*" class="number-input fl" />
					<a href="javascript:;" class="number-plus fl">+</a>
				</div>
			</div>
		</section>
		<section class="billing-list mt bb">
			<!-- billing-list-in 为选中状态-->
			<div class="billing-list-info bb c ">
				<span class="fl">精彩飞扬红食品</span>
				<a href="javascript:;" class="delivery co2 fr">配送方式</a>
			</div>
			<div class="billing-list-cont c">
				<img src="images/红枣.jpg" width="150" height="125" class="billing-list-img" />
				<p class="billing-list-title">红枣</p>
				<p class='co2'>包邮买三送一</p>
				<div class="billing-list-min">
					<span class="co1">￥<em class="f32" data-num="22">22</em>.00元</span>
				</div>
				<div class="billing-list-number" data-par="par-number">
					<a href="javascript:;" class="number-less fl">-</a>
					<input value="1" maxlength="3" type="text" pattern="[0-9]*" class="number-input fl" />
					<a href="javascript:;" class="number-plus fl">+</a>
				</div>
			</div>
			<div class="billing-list-cont c">
				<img src="images/月饼.jpg" width="150" height="125" class="billing-list-img" />
				<p class="billing-list-title">华美月饼</p>
				<p class='co2'>包邮买三送一</p>
				<p>
					<span class="co1 pr20">￥68.00元/盒</span>
					<span class="co2">￥89.00元/斤</span>
				</p>
				<div class="billing-list-min">
					<span class="co1">￥<em class="f32" data-num="68">68</em>.00元</span>
				</div>
				<div class="billing-list-number" data-par="par-number">
					<a href="javascript:;" class="number-less fl">-</a>
					<input value="1" maxlength="3" type="text" pattern="[0-9]*" class="number-input fl" />
					<a href="javascript:;" class="number-plus fl">+</a>
				</div>
			</div>
		</section>
	</div>
	<section class="cart-fixed bt">
		<div class="cart-all fl">
			<!-- <span class="cart-radio"></span> -->
			<span class="cart-radio"></span>全选
		</div>
		<div class="fl">合计：<em class="co1 f26"><em class="par-gong">88</em>.00</em></div>
		<a href="购物车订单确认页面.html" class="cart-submit fr">去结算</a>
	</section>
	<section class="select-wrap">
		<div class="select-this bt">
			<ul>
				<li>到店自提</li>
				<li>物流快递</li>
			</ul>
		</div>
	</section>
	<script src="js/zepto.min.js"></script>
	<script>
		var gong = 0;
		$('[data-par]').on('touchend',function(){
			var gong = 0;
			var Dom = $(this).parent().find('[data-num]');
			var DomText = Dom.attr('data-num');
			var DomInput = $(this).find('.number-input').val();
			Dom.text(DomText*DomInput);
			$('[data-num]').each(function(){
				gong = gong + parseInt($(this).text());
			})
			$('.par-gong').html(gong)
		})
		$('[data-num]').each(function(){
			gong = gong + parseInt($(this).text());
		})
		$('.par-gong').html(gong)
		$('.number-input').blur(function(){
			var gong = 0;
			var Dom = $(this).parent().parent().find('[data-num]');
			var DomText = Dom.attr('data-num');
			var DomInput = $(this).val();
			Dom.text(DomText*DomInput);
			$('[data-num]').each(function(){
				gong = gong + parseInt($(this).text());
			})
			$('.par-gong').html(gong)
		})
		//select
		var selectEvent = {
				selectList : $('.select-this li'),
				selectSub : $('.delivery'),
				into : function(){
					selectEvent.selectSub.on('touchstart',function(){
						subThis = $(this);
						$('.select-wrap').show();
					})
					selectEvent.selectList.on('touchstart',function(){
						var Text = $(this).text();
						subThis.text(Text);
					})
					$('.select-wrap').on('touchstart',function(){
						$(this).hide();
					})
				}
			}
		selectEvent.into();
		//number
		var listNumber = {
				List : $('.billing-list-info,.billing-list-cont'),
				numberLess : $('.number-less'),
				numberPlus : $('.number-plus'),
				numberInput : $('.number-input'),
				into : function(){
					var tun = false;
					listNumber.numberLess.on('touchend',function(){
						thisInput = $(this).parent().find(listNumber.numberInput);
						i = thisInput.val();
						i--;
						if(i <= 1)i = 1;
						thisInput.val(i);
					})
					listNumber.numberPlus.on('touchend',function(){
						thisInput = $(this).parent().find(listNumber.numberInput);
						i = thisInput.val();
						i++;
						if(i >= 999)i = 999;
						thisInput.val(i);
					})
					$(window).on('touchmove',function(){
						tun = true;
					})
					$('.delivery,.billing-list-number').on('touchstart',function(){
						tun = true;
					})
					listNumber.List.on('touchend',function(){
						if(tun){tun = false;return}
						$(this).toggleClass('billing-list-in');
						var tt = $(this).parent().find('.billing-list-cont');
						var i = 0;
						var j = 0;
						var tf = $(this).parent().find('.billing-list-info');
						tt.each(function(index){
							if($(this).hasClass('billing-list-in')){
								i++;
								i >= tt.length ? tf.addClass('billing-list-in') : tf.removeClass('billing-list-in')
							}
						})
						listNumber.List.each(function(){
							if($(this).hasClass('billing-list-in')){
								j++;
								j >= listNumber.List.length ? $('.cart-all').find('.cart-radio').addClass('cart-radio-in') : $('.cart-all').find('.cart-radio').removeClass('cart-radio-in')
							}
						})
					})
				}
			}
		listNumber.into();
		$('.cart-all').on('touchstart',function(){
			var cart = $(this).find('.cart-radio');
			cart.toggleClass('cart-radio-in');
			if(!cart.hasClass('cart-radio-in')){
				$('.billing-list-info,.billing-list-cont').removeClass('billing-list-in');
				return
			}
			$('.billing-list-info,.billing-list-cont').addClass('billing-list-in');
		})
		
		$('.billing-list-info').on('touchstart',function(){
			if($(this).hasClass('billing-list-in')){
				$(this).parent().find('.billing-list-cont').removeClass('billing-list-in');
				return
			}
			$(this).parent().find('.billing-list-cont').addClass('billing-list-in');
		})
	</script>
</body>
</html>